/**
 * 路由配置文件
 */

// 导入 创建路由对象 的函数
import { createRouter,
    createWebHashHistory,
    createWebHistory } from 'vue-router'
import Login from '../Login.vue'
import Home from '../Home.vue'
import Home0 from '../Home0.vue'
import Home1 from '../Home1.vue'
import Home2 from '../Home2.vue'

// 创建 路由对象
const router = createRouter({
    // 导航模式：

    // hash导航模式：url地址栏中会携带一个#，对浏览器的兼容性比较好；缺点是不太好看，丑路径，因为#。
    // createWebHashHistory，创建hash导航
    // history导航模式：没有#。因为比较新，所以对浏览器兼容性不太好。
    // createWebHistory，创建history导航

    history:createWebHashHistory(),

    // 设置导航的路由单元映射
    // 数组类型:成员=>路由单元对象
    routes:[
        {
            // 导航指定的url地址
            path:'/',
            // 指定加载的组件
            component:Login,
        },
        {
            // 导航指定的url地址
            path:'/home',
            // 指定加载的组件
            component:Home,
            // 通过children属性在组件中再嵌套一个子路由列表
            // children属性设置在哪个组件中，对应的嵌套路由导航的组件就会在当前组件中进行展示
            children:[
                {
                    // 嵌套子路由根路径设置
                    // path: '', 值为空也是正确的
                    path: '/home/', //写完整是正确的,推荐写完整些，不容易错
                    component: Home0,
                },
                {
                    // 嵌套子路由的路径设置：
                    // 1.设置path属性值不要加'/'，因为'/'代表根目录下的路径，但嵌套路由算二级
                    // 错误写法：path: '/home1',
                    // 2.path属性值设置完整的导航路径值
                    // 正确写法的一种：path: 'home1',
                    // 直接写也是正确的，但最好写完整的路径值，与to属性形成一致的映射关系
                    path: '/home/home1',
                    component: Home1,
                },
                {
                    path: '/home/home2',
                    component: Home2,
                }
            ]
        },
    ],
});

// 导出路由对象
export default router;